/**
 * Created by Sweelam on 21/02/2015.
 */

angular.module('Mosaic-Plot', [])
    .controller('Ctrl', function($scope) {

    })
    .directive('mosaic', function ($parse) {
        return {
            restrict: 'E',
            replace: true,
            template:
                '<div >' +
                '<center>'+
                '<button ng-click = "draw()"> Display Mosaic </button>'+
                    '<button ng-click = "color()"> Change Color </button>'+
                    '</center>'
                +'</div>',

            link: function (scope, element, attrs) {

                scope.draw = function() {


                    var width = 950,
                        height = 500,
                        margin = 20;

                    var x = d3.scale.linear()
                        .range([0, width - 3 * margin]);

                    var y = d3.scale.linear()
                        .range([0, height - 2 * margin]);

                    var z = d3.scale.category10();

                    var n = d3.format(",d"),
                        p = d3.format("%");

                    var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("transform", "translate(" + 2 * margin + "," + margin + ")");

                    d3.json("marimekko.json", function(error, data) {
                        var offset = 0;

                        // Nest values by segment. We assume each segment+market is unique.
                        var segments = d3.nest()
                            .key(function(d) { return d.segment; })
                            .entries(data);


                        // Compute the total sum, the per-segment sum, and the per-market offset.
                        // You can use reduce rather than reduceRight to reverse the ordering.
                        // We also record a reference to the parent segment for each market.
                        var sum = segments.reduce(function(v, p) {
                            return (p.offset = v) + (p.sum = p.values.reduceRight(function(v, d) {
                                d.parent = p;
                                return (d.offset = v) + d.value;
                            }, 0));
                        }, 0);

                        // Add x-axis ticks.
                        var xtick = svg.selectAll(".x")
                            .data(x.ticks(10))
                            .enter().append("g")
                            .attr("class", "x")
                            .attr("transform", function(d) { return "translate(" + x(d) + "," + y(1) + ")"; });

                        xtick.append("line")
                            .attr("y2", 6)
                            .style("stroke", "#000");

                        xtick.append("text")
                            .attr("y", 8)
                            .attr("text-anchor", "middle")
                            .attr("dy", ".71em")
                            .text(p);



                        // Add y-axis ticks.
                        var ytick = svg.selectAll(".y")
                            .data(y.ticks(10))
                            .enter()
                            .append("g")
                            .attr("class", "y")
                            .attr("transform", function(d) {
                                return "translate(0," + y(1 - d) + ")"; });

                        ytick.append("line")
                            .attr("x1", -6)
                            .style("stroke", "#000");

                        ytick.append("text")
                            .attr("x", -8)
                            .attr("text-anchor", "end")
                            .attr("dy", ".35em")
                            .text(p);



                        // Add a group for each segment.
                        var segments = svg.selectAll(".segment")
                            .data(segments)
                            .enter().append("g")
                            .attr("class", "segment")
                            .attr("xlink:title", function(d) { return d.key; })
                            .attr("transform", function(d) { return "translate(" + x(d.offset / sum) + ")"; });


                        // Add a rect for each market.
                        var rect = segments.selectAll(".market")
                            .data(function(d) { return d.values; })
                            .enter().append("a")
                            .attr("class", "market")
                            .attr("xlink:title", function(d) { return d.market + " " + d.parent.key + ": " + n(d.value); })
                            .append("rect")
                            .attr("y", function(d) { return y(d.offset / d.parent.sum); })
                            .attr("height", function(d) { return y(d.value / d.parent.sum); })
                            .attr("width", function(d) { return x(d.parent.sum / sum); })
                            .style("fill", function(d) { return z(d.market); });

                        scope.color =  function(){
                             d3.selectAll("rect")
                                 .transition()
                                 .style("fill", function(d) { return z(d.value); })
                                 . duration(1000);
                        };
                    });

                }
                }
            };
    });
